<template>
	<view class="area-box">
		<view class="u-flex" :class="{ 'change':isChange }">
			<view class="area-item">
				<view class="u-padding-10 u-bg-gray" style="height: 100%;">
					<scroll-view :scroll-y="true" style="height: 100%">
						<u-cell-group>
							<u-cell-item v-for="(item,index) in com_address._child" :title="item.name" :arrow="false" :index="index" :key="index"
							 @click="provinceChange">
								<u-icon v-if="isChooseP&&province===index" v-slot:right-icon size="34" color="#de1f1c" name="checkbox-mark"></u-icon>
							</u-cell-item>
						</u-cell-group>
					</scroll-view>
				</view>
			</view>
			<view class="area-item">
				<view class="u-padding-10 u-bg-gray" style="height: 100%;">
					<scroll-view :scroll-y="true" style="height: 100%">
						<u-cell-group v-if="isChooseP">
							<u-cell-item v-for="(item,index) in citys" :title="item.name" :arrow="false" :index="index" :key="index"
							 @click="cityChange">
								<u-icon v-if="isChooseC&&city===index" v-slot:right-icon size="34" color="#de1f1c" name="checkbox-mark"></u-icon>
							</u-cell-item>
						</u-cell-group>
					</scroll-view>
				</view>
			</view>
			
			<!-- <view class="area-item">
				<view class="u-padding-10 u-bg-gray" style="height: 100%;">
					<scroll-view :scroll-y="true" style="height: 100%">
						<u-cell-group v-if="isChooseC">
							<u-cell-item v-for="(item,index) in areas" :title="item.label" :arrow="false" :index="index" :key="index"
							 @click="areaChange">
								<u-icon v-if="isChooseA&&area===index" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
							</u-cell-item>
						</u-cell-group>
					</scroll-view>
				</view>
			</view> -->
		</view>
		
		<view class="bottom-box u-flex">
			<view class="reset" @click="reSet">
				<text class="iconfont icon-zhongzhi"></text>
				<view>重置</view>
			</view>
			<view class="btn">
				<u-button shape="circle" type="primary" @click="setData">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * city-select 省市区级联选择器
	 * @property {String Number} z-index 弹出时的z-index值（默认1075）
	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
	 * @property {String} default-region 默认选中的地区，中文形式
	 * @property {String} default-code 默认选中的地区，编号形式
	 */
	export default {
		data() {
			return {
				cityValue: "",
				isChooseP: false, //是否已经选择了省
				province: 0, //省级下标
				provinces: [],
				isChooseC: false, //是否已经选择了市
				city: 0, //市级下标
				citys: [],
				isChooseA: false, //是否已经选择了区
				area: 0, //区级下标
				areas: [],
				tabsIndex: 0,
			}
		},
		methods: {
			provinceChange(index) {
				this.isChooseP = true;
				this.isChooseC = false;
				this.isChooseA = false;
				this.province = index;
				this.citys = this.com_address._child[index]._child || []
				// this.citys = citys[index];
				this.tabsIndex = 1;
			},
			cityChange(index) {
				this.isChooseC = true;
				this.isChooseA = false;
				this.city = index;
				
				this.tabsIndex = 2;
			},
			setData(){
				if(this.tabsIndex === 2){
					let result = {};
					result.province = this.com_address._child[this.province];
					result.city = this.citys[this.city]
					this.$emit('city-change', result);
				}else{
					// 重置
					this.$emit('city-change', !1);
				}
			},
			reSet(){
				this.citys = []
				this.tabsIndex = 1
				this.province = -1
				this.city = -1
			}
		}

	}
</script>
<style lang="scss" scoped>
	.area-box {
		width: 100%;
		overflow: hidden;
		height: 620rpx;
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;

		>view {
			width: 150%;
			transition: transform 0.3s ease-in-out 0s;
			transform: translateX(0);

			&.change {
				transform: translateX(-33.3333333%);
			}
		}

		.area-item {
			width: 33.333333%;
			height: 500rpx;
		}
	}
	
	.bottom-box{
		border-top: 1rpx solid #ccc;height: 120rpx;width: 100%!important;
		.reset{
			margin: 0 30rpx 0 40rpx;text-align: center;
			.iconfont{font-weight: bold;}
		}
		.btn{flex: 1;padding-right: 40rpx;}
	}
</style>
